import React from 'react';
import {DataTypes, SDP, ESBC} from '@assets/config/global_config.js';
// echart
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legendScroll';

class EchartStackBars extends React.Component {

    constructor(props) {
        super(props);
        this.echartDom = null;
        this.systemBarEchart = null;
    }

    componentDidMount() {
        this.echartConfig();
    }

    echartConfig() {
        this.systemBarEchart = echarts.init(this.echartDom);
        let splitedType = Object.keys(SDP).slice(0, 2);
        let {data} = this.props;
        let xAxisData = Object.keys(DataTypes).map(item => DataTypes[item]);
        let seriesData = splitedType.map(property => {
            return {
                name: SDP[property],
                type: 'bar',
                barGap: '50%',
                stack: 'two',
                barMaxWidth: 50,
                data: Object.keys(data).map(item => data[item][property])
            }
        });

        let option = {
            color: ESBC,
            tooltip: {
                trigger: 'axis',
                backgroundColor: '#3d83fe',
                padding: [5, 10],
                formatter(params) {
                    let total = 0, issues = 0, normal = 0;
                    for (let i = 0; i < params.length; i++) {
                        let param = params[i];
                        param.seriesIndex ? issues = param.value : normal = param.value;
                        total += param.value;
                    }
                    return `数据总量：${total}条<br/>
                            正常数据：${normal}条&nbsp;&nbsp;${((100 * normal) / total).toFixed(2)}%<br/>
                            问题数据：${issues}条&nbsp;&nbsp;${((100 * issues) / total).toFixed(2)}%`;
                },
                axisPointer: {
                    type: 'none',
                    shadowStyle: {color: 'rgba(255, 255, 255, 0)'}
                }
            },
            grid: {
                left: 40, right: 20, top: 60, bottom: 25
            },
            legend: {right: 20, itemWidth: 14, itemHeight: 14, textStyle: {color: '#fff'}, selectedMode: false},
            toolbox: {show: true, orient: 'vertical', left: 'right', top: 'center'},
            calculable: true,
            xAxis: [{
                type: 'category',
                axisLine: {show: false},
                axisLabel: {textStyle: {color: '#7484cb'}},
                axisTick: {show: false},
                data: xAxisData
            }],
            yAxis: [{
                type: 'value',
                axisLine: {show: false},
                axisTick: {show: false},
                axisLabel: {textStyle: {color: '#7484cb'}},
                splitLine: {lineStyle: {color: '#212e5d'}}
            }],
            series: seriesData
        };
        this.systemBarEchart.setOption(option, true);
    }

    render() {
        return <div className="echart-box"
                    ref={(node) => this.echartDom = node}></div>
    }
}

export default EchartStackBars;